.modal-dialog(role='document')
  .modal-content
    form.modal-form(role='form')
      .modal-header
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true') &times;
        h4.modal-title Edit annotation styles
      .modal-body
        - var label = model.get('label') || {};
        .form-group
          label(for='h-group-name') Name
          if newStyle
            .input-group
              input.form-control.input-sm.h-new-group-name(type='text')
              .input-group-btn
                button.btn.btn-default.btn-sm.h-save-new-style
                  span.icon-ok
          else
            .input-group
              select.form-control.h-group-name
                each style in collection.sortBy('id')
                  - var selected = model.id === style.id
                  option(value=style.get('id'), selected=selected)
                    = style.get('id')
              .input-group-btn
                if collection.length > 1
                  button.btn.btn-default.h-delete-style
                    span.icon-minus(data-toggle='tooltip', title='Delete the listed style')
                button.btn.btn-default.h-create-new-style
                  span.icon-plus(data-toggle='tooltip', title='Create a new style')
        .form-group
          label(for='h-element-label') Label
          input#h-element-label.h-style-def.input-sm.form-control(
            type='text', placeholder='Enter an optional label applied to all elements', value=label.value)
        .form-group
          label(for='h-element-line-width') Line width
          input#h-element-line-width.h-style-def.input-sm.form-control(
            type='number', min=0, step=0.1, value=model.get('lineWidth'))
        .form-group
          label(for='h-element-line-color') Line color
          .input-group.h-colorpicker
            input#h-element-line-color.input-sm.form-control(
              type='text', value=model.get('lineColor'))
            span.input-group-addon
              i
        .form-group
          label(for='h-element-fill-color') Fill color
          .input-group.h-colorpicker
            input#h-element-fill-color.input-sm.form-control(
              type='text', value=model.get('fillColor'))
            span.input-group-addon
              i
        .g-validation-failed-message.hidden
      .modal-footer
        button#h-reset-defaults.btn.btn-sm.btn-default.h-btn-left(type='button') Reset to Defaults
        if user.get && user.get('admin')
          button#h-set-defaults.btn.btn-sm.btn-default.h-btn-left(type='button') Save as Defaults
        button#h-export.btn.btn-sm.btn-default.h-btn-left(type='button') Export
          a#h-export-link(download='hui_groups.json')
        button#h-import.btn.btn-sm.btn-default.h-btn-left(type='button', title='Completely replace all styles if checked; add to and modify existsing styles if unchecked') Import
          input#h-import-replace(type='checkbox')
        input#h-import-groups(type='file', name='import-groups')
        button.btn.btn-default.h-cancel(type='button', data-dismiss='modal') Cancel
        button.btn.btn-primary.h-submit(type='submit') Save
